<template>
	<view class="">
		<template v-if="is_search == 1">
			<view class="recommend_title">
				<text class="recommend_title_1"></text>
				<text class="recommend_title_2"></text>
				<text class="recommend_title_3">推荐</text>
				<text class="recommend_title_4"></text>
				<text class="recommend_title_1"></text>
			</view>
			<view class="recommend_search">
				<view class="search_input">
					<input v-model="searchPerson" placeholder="搜索用户" placeholder-style="font-size:28rpx" type="text">
					<image :src='STATIC_URL+"96.png"' mode="aspectFill"></image>
				</view>
			</view>
			<view class="query_info">
				<view class="query_select">
					<!-- <view class="select_left">验证消息</view>
					<view class="select_right">
						<u-icon color="#999" name="arrow-down" size="20"></u-icon>
					</view> -->
					<zxz-uni-data-select :placeholder="'验证消息'" v-model="is_certify" :localdata="testList" dataKey="label" dataValue="value" @change="selectChange1"></zxz-uni-data-select>
				</view>
				<view class="query_select">
					<zxz-uni-data-select :placeholder="'验证消息'" v-model="is_video" :localdata="videoList" dataKey="label" dataValue="value" @change="selectChange2"></zxz-uni-data-select>
				</view>
				<view class="query_btn" @tap.stop="queryBtn">
					<text>查询</text>
				</view>
			</view>
		</template>
		
		<view class="user_list">
			<view class="list_item" v-for="(item, index) in list" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/home/userDetails/index?id=${item.id}`">
				
				<view style="position: relative;">
					<image class="image_1" :src='item.image' mode="aspectFill"></image>
					<template v-if="item.is_real_person_auth == 1 && item.is_certify_auth == 1">
						<view class="certified" >
							已实人认证
						</view>
					</template>
					<template v-else>
						<view class="certified" v-if="item.is_real_person_auth == 1">
							已真人认证
						</view>
						<view class="certified" v-if="item.is_certify_auth == 1">
							已实人认证
						</view>
					</template>
					<image v-if="item.is_video == 1" class="play_btn" :src='STATIC_URL+"97.png"' mode="aspectFill"></image>
				</view>
				<view class="item_name">
					<image class="image_2" :src='item.head_img' mode="aspectFill"></image>
					<view>{{item.user_nickname}}</view>
				</view>
				<view class="item_city">
					<view class="">{{item.city}}</view>
					<view class="">{{item.age}}岁</view>
				</view>
				<view class="item_date_info" v-if="is_data == '1'">
					<view class="item_date">
						<text>浏览：</text>
						<text>2023-10-10 13：00</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="last_page > 1" class="loadmore" font-size="24" :status="status" :icon-type="iconType"
			:load-text="loadText" />
		<view class="noData_other" v-if="list.length == 0 && !is_show">
			<image src="/static/empty/no.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			is_search: {
				type: [String, Number],
				default: '0'
			},
			is_data: {
				type: String,
				default: '0'
			},
			country: {
				type: String,
				default: ''
			},
			city: {
				type: String,
				default: ''
			},
			area: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				searchPerson: "",
				testList: [{
					label: '全部',
					value: 0
				},{
					label: '已验证',
					value: 1
				},{
					label: '未验证',
					value: 2
				}],
				videoList: [{
					label: '全部',
					value: 0
				},{
					label: '有视频',
					value: 1
				},{
					label: '无视频',
					value: 2
				}],
				is_certify: 0,  // 是否认证：0=全部，1=已认证，2=未认证
				is_video: 0,  // 是否有视频：0=全部，1=有视频，2=无视频
				
				"is_show": true,
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
			}
		},
		created() {
			this.is_show = true;
			this.getUserData();
		},
		methods: {
			selectChange1(e) {
				// console.log(e);
				this.is_certify = e.value;
			},
			selectChange2(e) {
				this.is_video = e.value;
			},
			// 查询
			queryBtn() {
				this.getUserData();
			},
			// 首页推荐用户列表  post659fd4ab72d25
			getUserData() {
				this.$api.post(global.apiUrls.post659fd4ab72d25, {
					country: this.country,
					city: this.city,
					area: this.area,
					is_certify: this.is_certify,
					is_video: this.is_video,
					keyword: this.keyword,
					page: this.page
				}).then(res => {
					console.log(res);
					this.is_show = false;
					uni.stopPullDownRefresh();
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						if (this.is_pull) {
							this.list = res.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 下拉加载
			onPullDownRefreshData() {
				this.page = 1;
				this.is_pull = true;
				this.is_show = true;
				this.getUserData();
			},
			// 上拉加载
			onReachBottomData() {
				if (this.page >= this.last_page) return;
				this.status = 'loading';
				this.page++;
				setTimeout(() => {
				
					if (this.page >= this.last_page) this.status = 'nomore';
					else this.status = 'loading';
					this.is_pull = false;
					this.getUserData();
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_title {
		margin: 40rpx 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.recommend_title_1 {
			display: inline-block;
			border-radius: 50%;
			width: 10rpx;
			height: 10rpx;
			background: #8B060D;
			opacity: 0.5;
		}
		.recommend_title_2 {
			display: inline-block;
			border-radius: 50%;
			width: 10rpx;
			height: 10rpx;
			background: #8B060D;
			opacity: 1;
			margin-left: 12rpx;
		}
		.recommend_title_3 {
			font-size: 32rpx;
			font-weight: bold;
			margin: 0 36rpx;
		}
		.recommend_title_4 {
			display: inline-block;
			border-radius: 50%;
			width: 10rpx;
			height: 10rpx;
			background: #8B060D;
			opacity: 1;
			margin-right: 12rpx;
		}
	}
	.recommend_search {
		height: 72rpx;
		background: #fff;
		border-radius: 12rpx;
		position: relative;
		margin-bottom: 24rpx;
		margin: 0 32rpx;
		input {
			height: 72rpx;
			padding: 0 32rpx 0 74rpx;
		}
		
		image {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			left: 32rpx;
			top: 22rpx;
		}
	}
	.query_info {
		margin: 24rpx 32rpx 40rpx;
		display: flex;
		.query_select {
			width: 270rpx;
			height: 64rpx;
			background: #fff;
			border-radius: 12rpx;
			// padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-right: 24rpx;
			.select_left {
				font-size: 24rpx;
				color: #999;
			}
			.select_right {
				
			}
		}
		.query_btn {
			width: 97rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #8B060D;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	.user_list {
		margin: 0 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.list_item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			width: 336rpx;
			.image_1 {
				width: 336rpx;
				height: 336rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
			.item_name {
				padding: 25rpx 20rpx 25rpx 20rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				.image_2 {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					border-radius: 50%;
				}
			}
			.item_city {
				padding: 0rpx 20rpx 25rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
			}
			.play_btn {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			.certified {
				position: absolute;
				top: 0;
				right: 0;
				width: 154rpx;
				height: 48rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 24rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.item_date_info {
				padding: 0 20rpx;
				.item_date {
					padding: 24rpx 0rpx;
					font-size: 22rpx;
					color: #999;
					border-top: 1rpx solid #eee;
				}
			}
			
		}
	}
</style>